<div
  class="mat-elevation-z8"
  style="
    display: flex;
    flex-direction: column;
  "
>
  <cdk-virtual-scroll-viewport
    [tvsItemSize]="30"
    style="height: 100%; min-height: 50vh"
  >
    <table
      mat-table
      matSort
      style="flex: 0"
      [dataSource]="dataSource"
      class="this-table"
    >
      <ng-container
        *ngFor="let item of columnsValue; let i = index"
        [matColumnDef]="item"
      >
        <ng-container>
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            <div style="float: left; max-width: 100%">
              <div style="max-width: 100%; text-align: left">
                {{ item | titlecase }}
              </div>
              <div *ngIf="checkFilterColumn(item)" style="max-width: 100%">
                <input
                  [placeholder]="item"
                  class="search-input"
                  value=""
                  (keyup)="applyFilter($event, item)"
                />
              </div>
            </div>
          </th>
          <td *matCellDef="let element">
            {{ element[getKeyBy(item)] }}
          </td>
        </ng-container>
      </ng-container>

      <tbody>
        <tr mat-header-row *matHeaderRowDef="columnsValue"></tr>
        <tr
          mat-row
          *matRowDef="let row; index as i; columns: columnsValue"
          [style.background-color]="
            getSelected(i) ? '#3f51b5' : row.bg && '#' + row.bg
          "
          [style.color]="
            getSelected(i)
              ? '#fff !important'
              : row.fg && '#' + row.fg + ' !important'
          "
          (click)="onRowClick(row, i, $event)"
          (dblclick)="onRowDblClick(row, i, $event)"
        ></tr>
      </tbody>
    </table>
  </cdk-virtual-scroll-viewport>
  <div style="flex: 1"></div>
  <mat-paginator
    *ngIf="isPaginator"
    style="flex: 0"
    [pageSizeOptions]="[10, 25, 50, 100, 200]"
    showFirstLastButtons
  ></mat-paginator>
</div>
